<template>
  <div ref="main" id="main" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      // let myChart = this.$echarts.init(document.getElementById("main"));
      let myChart = this.$echarts.init(this.$refs.main);
      let pixelSeries = [];
      // 指定图表的配置项和数据
      let option = {
        xAxis: {
          name: "",
          data: ["2019", "2020", "2021", "2022", "2023"],
          type: "category",
          axisLabel: {
            color: "#32ADE3",
            fontSize: 14,
            // rotate: 45,
            interval: "auto",
          },
          showMaxLabel: true,
          splitLine: {
            lineStyle: {
              color: ["#E5E5E5"],
            },
          },
          axisLine: {
            show: false,
            symbol: ["none", "none"],
            lineStyle: {
              color: "",
            },
          },
          axisTick: {
            show: true,
          },
        },
        yAxis: {
          name: "",
          type: "value",
          axisLabel: {
            formatter: "{value}",
            color: "#32ADE3",
            fontSize: 16,
            lineHeight: 30,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#304D84",
            },
          },
          axisLine: {
            show: false,
            symbol: ["none", "none"],
            lineStyle: {
              color: "",
            },
          },
          // 显示刻度
          axisTick: {
            show: true,
          },
        },

        legend: {
          top: 25,
          right: "center",
          type: "plain",
          show:false
        },
        grid: {
          bottom: 20,
          // 距底部距离
          left: 30,
          right: 60,
          top:10,
          bottom:20,
          containLabel: true,
          // 为ture才会生效以上的设置
        },
        tooltip: {
            // show:false,
          trigger: "axis",
        },
        series: [
          {
            name: "更新率",
            data: [
            
              {
                id: 3,
                value: 229,
              },
              {
                id: 4,
                value: 123,
              },
              {
                id: 5,
                value: 187,
              },
              {
                id: 6,
                value: 194,
              },
              {
                id: 7,
                value: 78,
              },
            ],
            type: "line",
            color: "#EB5D58",
            showSymbol: true,
            symbol: "circle",
            symbolSize: 6,
          },
          {
            name: "利用率",
            data: [
              {
                id: 8,
                value: 199,
              },
              {
                id: 9,
                value: 167,
              },
              {
                id: 10,
                value: 178,
              },
              {
                id: 11,
                value: 130,
              },
              {
                id: 12,
                value: 98,
              },
           
            
            ],
            type: "line",
            color: "#FFAD55",
            showSymbol: true,
            symbol: "circle",
            symbolSize: 6,
          },
          {
            name: "新增",
            data: [
            
              {
                id: 10,
                value: 158,
              },
              {
                id: 11,
                value: 120,
              },
              {
                id: 12,
                value: 118,
              },
              {
                id: 13,
                value: 204,
              },
              {
                id: 14,
                value: 116,
              },
            ],
            type: "line",
            color: "#0084FF",
            showSymbol: true,
            symbol: "circle",
            symbolSize: 6,
          },
          {
            name: "新增2",
            data: [
            
              {
                id: 10,
                value: 188,
              },
              {
                id: 11,
                value: 140,
              },
              {
                id: 12,
                value: 128,
              },
              {
                id: 13,
                value: 144,
              },
              {
                id: 14,
                value: 126,
              },
            ],
            type: "line",
            color: "#CE5FFF",
            showSymbol: true,
            symbol: "circle",
            symbolSize: 6,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style></style>
